html, body {
  margin: 0;
  padding: 0;
  background-color: #181D24;
}

.container {
    position: absolute;
    margin: 0;
    background-color: #181D24;
}

/* ---------------- ANIMATION ---------------- */
@keyframes float {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(10) scale(1);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes flicker {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.3;
  }
}
/* animated text code: https://techblog.geekyants.com/some-of-the-most-popular-css-text-animations */
.wrapper.eight {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 50px;
    z-index: 100;
    background: transparent;
    display: inline-flex;
}
.eight .smoke {
    position: relative;
    display: inline-flex;
    pointer-events: auto
}
.eight span {
    display: inline-flex;
    color: crimson;
    text-shadow: 8px 2px 0px rgba(0, 0, 0, 1);
    font-family: "Press Start 2P", system-ui;
}

/* forces animation to only happen when hover is active */
.eight .smoke:hover {
    animation: smoke 4s ease infinite;
}

@keyframes smoke {
    20% {
        color: transparent;
        text-shadow: 0 0 40px crimson;
    }
    to {
        color: transparent;
        transform: translate3d(12rem, -10rem, 0) skewX(50deg);
        text-shadow: 0 0 20px crimson;
        opacity: 0;
    }
}

.eight span:nth-of-type(1) {
    animation-delay: 1.1s;
}
.eight span:nth-of-type(2) {
    animation-delay: 1.2s;
}
.eight span:nth-of-type(3) {
    animation-delay: 1.3s;
}
.eight span:nth-of-type(4) {
    animation-delay: 1.4s;
}
.eight span:nth-of-type(5) {
    animation-delay: 1.5s;
}

/* typing animation: https://codepen.io/alvaromontoro/pen/rNwVpdd */
.typewriter {
  --caret: currentcolor;
}

.typewriter2 {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing-sleeping 3s steps(20) forwards;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.typewriter::after {
  content: "";
  border-right: 1ch solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.typewriter2::before {
  content: "";
  animation: typing-order 3s 1s steps(32) forwards;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

.typewriter2::after {
  content: "";
  border-right: 1ch solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.red-text.sleep.typewriter::before {
  content: "\201CWere you sleeping?\201D";
}

.red-text.order.typewriter2::before {
  content: "\201C Don't take stuff out of order.\201D";
}

@keyframes typing-sleeping {
  from { width: 0; }
  to { width: 20ch; }
}

@keyframes typing-order {
  from { width: 0; }
  to { width: 32ch; }
}


@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------------- IMAGES ---------------- */

img {
  width: 100%;
  height: auto;
  display: block;
}

.cat {
  position: absolute;
  width: 35%;
  top: 3%;
  left: 3%;
  animation: float 3s infinite;
  z-index: 100;
}

.scratch {
  position: absolute;
  width: 45%;
  top: 0%;
  left: 55%;
  z-index: 10;
  animation: flicker 6s infinite;
}

.home {
    position: absolute;
    width: 15%;
    top: 0%;
    left: 0%;
    z-index: 10;
}

/* ---------------- BUTTONS ---------------- */
/* -------- HOME --------- */
.home-default, .home-hover {
    width: 100%;
}

.home-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home:hover .home-hover {
    opacity: 1;
}

.home:hover .home-default {
    opacity: 0;
}

/* -------- BACK --------- */
.back {
    position: absolute;
    width: 15%;
    top: 0%;
    right: 0%;
    z-index: 10;
}

.back-default, .back-hover {
    width: 100%;
}

.back-hover {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.back:hover .back-hover {
    opacity: 1;
}

.back:hover .back-default {
    opacity: 0;
}

/* -------- ARROWS --------- */
.arrow {
    position: absolute;
    width: 15%;
    bottom: 0%;
    right: 0%;
    z-index: 10;
}

.arrow-default, .arrow-hover {
    width: 100%;
}

.arrow-hover {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.arrow:hover .arrow-hover {
    opacity: 1;
}

.arrow:hover .arrow-default {
    opacity: 0;
}


/* -------- CONTINUE --------- */
.continue {
    position: absolute;
    width: 15%;
    bottom: 0%;
    right: 0%;
    z-index: 10;
}

.continue-default, .continue-hover {
    width: 100%;
}

.continue-hover {
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.continue:hover .continue-hover {
    opacity: 1;
}

.continue:hover .continue-default {
    opacity: 0;
}

/* -------- BUTTONS END --------- */
.shoes {
    width: 45%;
    position: absolute;
    /* vh (viewport height) does not care about container size allowing for scaling based on viewport size */
    margin: 10% 0 0 0;
    animation: float 3s infinite;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.beef {
    position: absolute;
    width: 50%;
    z-index: 1;
    animation: bounce 4s infinite;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.cook {
    position: absolute;
    width: 50%;
    margin: 99% 0 0 50%;
    z-index: 1;
    animation: float 2s infinite;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.apples {
    position: absolute;
    width: 30%;
    margin: 10% 0 0 60%;
    z-index: 1;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
    animation: float 3s infinite;
}

.mother {
    position: absolute;
    width: 30%;
    margin: 46% 0 0 5%;
    z-index: 10;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
    animation: bounce 4s infinite;
}

.head-pat {
    position: absolute;
    width: 40%;
    margin: 85% 0 0 60%;
    z-index: 10;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
    animation: float 4s infinite;
}

.header {
  background-image: url('EYES.gif');
  background-position: top left;
  background-repeat: repeat; 
  background-size: 200px auto; 
  z-index: 0;
}

/* ---------------- TEXT ---------------- */

.house {
  font-family: "Notable", sans-serif;
  font-weight: 400;
  font-style: normal;
  /* clamp(MINIMUM, PREFERRED, MAXIMUM) 
        makes the font size responsive to the viewport width, but also sets a minimum and maximum size. 
        180px is the maximum size, 40px is the minimum size, and 10vw is the preferred size based on the viewport width.
    */
  font-size: clamp(40px, 10vw, 180px);
  margin: 0;

/* use % instead of px for content to scale with screen size */
  top: 40%;
  left: 28%;

  position: absolute;
  color: black;
/* prevents hyperlink from underlining */
  text-decoration: none;
/* for hovering over: eases in scale transformation and color change */
  transition: transform 0.2s ease, color 0.2s ease;
}

.house:hover {
  transform: scale(1.1);
  color: crimson;
}

.chapter {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(12px, 2vw, 30px);
  margin: 0;
  top: 40%;
  left: 38%;
  position: absolute;
}

.title {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(12px, 2vw, 30px);
  margin: 0;
  top: 57%;
  left: 40%;
  position: absolute;
}

.by {
  font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;

  font-size: clamp(12px, 2vw, 30px);
  margin: 0;
  top: 61%;
  left: 24%;
  position: absolute;
  color: azure;
}

 .p3t {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;

    background-image: url("images/P3T.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    position: absolute;

    padding: 4%;
    box-sizing: border-box;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.p1 {
    width: 45%;
    z-index: 4;
}

.p2 {
    width: 45%;
    z-index: 5;
}

.p7 {
    width: 45%;
    z-index: 2;
}

.p8 {
    width: 45%;
    z-index: 2;
}

.p9 {
    width: 45%;
    z-index: 2;
}

.p10 {
    width: 45%;
    z-index: 2;
}

.min3 {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;

    background-image: url("images/MIN3.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    position: absolute;
    box-sizing: border-box;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.p3 {
    width: 45%;
    z-index: 3;
}

.p4 {
    width: 45%;
    z-index: 2;
}

.p6 {
    width: 45%;
    z-index: 2;
}

.t3mpr {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;

    background-image: url("images/T3MPR.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    position: absolute;

    padding: 5%;
    box-sizing: border-box;
    filter: drop-shadow(20px 20px 0px rgba(0, 0, 0, 1));
}

.p5 {
    width: 50%;
    z-index: 3;
}

.paragraph {
    text-align: justify;
    line-height: 1.5;
    margin: 20px 0 -5px 0;
}

.red-text {
  position: absolute;
    z-index: 20;
  margin: 0;
    
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    
    font-size: 50px;
    color: crimson;
    text-shadow: 8px 2px 0px rgba(0, 0, 0, 1);
}

.smoke.knock1 {
    top: 530px;
    left: 450px;
}

.smoke.knock2 {
    top: 590px;
    left: 440px;
}

.smoke.knock3 {
    top: 650px;
    left: 440px;
}

.red-text.sleep {
    top: 960px;
    left: 600px;
}

.red-text.order {
    top: 1500px;
    left: 340px;
}

.story-links {
  position: absolute;
  left: 96px;
  bottom: 40px;
  z-index: 20;
  display: flex;
  gap: 24px;
}

.story-links a {
  color: red;
}

/* story canvas layout — applies at all screen widths.
   clamp() below handles the shrinking/capping, so this no longer
   needs to be limited to narrow screens with a media query. */
.story-page {
    /* clamp() puts a FLOOR (0.6) and CEILING (1) on the scale.
       Without the floor, scale keeps shrinking as the window gets
       narrower, so the 13px text shrinks right along with it.
       With the floor, once the window is narrower than ~1150px
       (1920 * 0.6) the canvas stops shrinking and the page scrolls
       sideways instead of the text becoming unreadable.
       The ceiling of 1 stops it from ever scaling ABOVE the
       original design size on very wide screens.
       Raise 0.6 for bigger minimum text (more side-scrolling),
       lower it for less side-scrolling (smaller minimum text). */
    width: 1920px;
    zoom: clamp(0.6, calc(100vw / 1920px), 1);
    transform: none;
}

.story-page .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
    z-index: 0;
}

    .story-page .home {
        position: absolute;
        top: 0;
        left: 0;
        width: 288px;
    }

    .story-page .shoes {
        top: 192px;
        left: 0;
        width: 864px;
        margin: 0;
    }

    .story-page .p1 {
        top: 344px;
        left: 960px;
        width: 864px;
        height: 405px;
    }

    .story-page .p2 {
        top: 700px;
        left: 672px;
        width: 864px;
        height: 405px;
    }

    .story-page .beef {
        top: 1152px;
        left: 1056px;
        width: 960px;
    }

    .story-page .p3 {
        top: 1152px;
        left: 96px;
        width: 960px;
        height: 360px;
    }

    .story-page .p4 {
        top: 1536px;
        left: 400px;
        width: 960px;
        height: 360px;
    }

    .story-page .p5 {
        top: 1900px;
        left: 96px;
        width: 960px;
        height: 480px;
    }

  .story-page .p6 {
        top: 300px;
        left: 96px;
        width: 960px;
        height: 480px;
    }

  .story-page .p7 {
        top: 650px;
        left: 450px;
        width: 960px;
        height: 480px;
    }

  .story-page .p8 {
        top: 1050px;
        left: 800px;
        width: 960px;
        height: 480px;
    }

  .story-page .p9 {
        top: 1536px;
        left: 150px;
        width: 960px;
        height: 800px;
    }

  .story-page .p10 {
        top: 1536px;
        left: 150px;
        width: 960px;
        height: auto;
    }

    .story-page .p3t{
        padding: 100px 60px 50px;
    }

    .story-page .min3 {
        padding: 100px 60px 90px;
    }


    .story-page .paragraph {
        margin: 0;
    }

    /* the text boxes are scrollable if the text is too long to fit in the box */

    .story-page .p3t .paragraph,
    .story-page .min3 .paragraph, .story-page .t3mpr .paragraph {
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        overscroll-behavior: contain;
        box-sizing: border-box;
        background: transparent;
    }

    .story-page .continue, .story-page .arrow {
        position: absolute;
        top: 2300px;
        right: 0;
        bottom: auto;
        width: 288px;
    }